import { RiTodoFill, RiDeleteBin2Line } from 'react-icons/ri';
import { FaCheck } from 'react-icons/fa';
import styles from './Todo.module.css';

const Todo = ({ todo, index, deleteTodo, toggleTodo }) => {
    return (
        <tr
            className={`${todo.isComplete ? 'table-secondary text-decoration-line-through' : ''}`}
        >
            <th scope="row">{index + 1}</th>
            <td><RiTodoFill className={styles.todoIcon}/> {todo.text}</td>
            <td><RiDeleteBin2Line className={styles.deleteIcon} onClick={() => deleteTodo(todo.id)}/></td>
            <td><FaCheck className={styles.checkIcon} onClick={() => toggleTodo(todo.id)}/></td>
        </tr>
    );
}

export default Todo;
